
/*
    在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的URL上使用，限制了其灵活性
    可以使用props将组件和路由解耦，这样可以在任何地方使用该组件，使得组件更易于重用

    布尔模式：
      props被设置为true，route.params将被设置为组件属性

    对象模式：
      如果props是一个对象，它会被按原样设置为组件属性，当props是静态的时候有用
          const router = new VueRouter({
            routes: [
              { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
            ]
          })


    函数模式：
      创建一个函数返回props，这样方便将参数转换成另一种类型      

          const router = new VueRouter({
            routes: [
              { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
            ]
          })

          URL /search?q=vue 会将 {query: 'vue'}作为属性传递给SearchUser组件
          注意: 请尽可能保持props函数为无状态的，因为它只会在路由发生变化时起作用


*/

// $route的耦合写法
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})


// 通过props解耦
const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true }, // Pass route.params to props

    { path: '/user/:id', component: User, props: { name: 'world' } }, // static values

    // 对于包含多个命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})